<template>
  <div>
    <el-form :model="form" label-width="100px">
      <el-row>
        <el-input
          v-model="form.parkname"
          placeholder="车位名称"
          style="width: 15%; margin-left: 15px"
        ></el-input>
        <el-input
          v-model="form.orderpay"
          placeholder="应缴金额"
          style="width: 15%; margin-left: 15px"
        ></el-input>
        <el-select
          v-model="form.orderstatus"
          placeholder="缴费状态"
          clearable
          style="width: 15%; margin-left: 15px"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
          type="primary"
          @click="getSmartData()"
          class="postButton"
          style="margin-left: 20px"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button
          type="success"
          @click="outExcel"
          class="postButton"
          icon="el-icon-document-copy"
          >全量导出</el-button
        >
        <el-button
          type="primary"
          @click="reset"
          class="postButton"
          icon="el-icon-edit"
          >重置</el-button
        >
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      :header-cell-style="{
        background: '#eef1f6',
        color: '#1f2d3d',
        'border-color': '#dfe6ec',
      }"
      style="width: 100%; font-size: 14px; color: #1f2d3d; margin-top: 20px"
    >
      <el-table-column
        label="序号"
        width="100px"
        align="center"
        type="index"
        :index="indexMethod"
      >
      </el-table-column>
      <el-table-column
        prop="parkname"
        label="车位名称"
        min-width="10%"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="parkname"
        label="车位金额"
        min-width="10%"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="startdate"
        label="开始时间"
        min-width="10%"
        align="center"
        :formatter="dateFormat"
      >
      </el-table-column>
      <el-table-column
        prop="enddate"
        label="结束时间"
        min-width="10%"
        align="center"
        :formatter="dateFormat"
      >
      </el-table-column>
      <el-table-column
        prop="orderpay"
        label="应缴金额"
        min-width="10%"
        align="center"
      >
      </el-table-column>
      <el-table-column label="缴费状态" min-width="10%" align="center">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.orderstatus"
            :active-value="1"
            :inactive-value="2"
            active-text="已缴费"
            inactive-text="未缴费"
            class="switch"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="this.type == '1'"
        label="操作"
        min-width="15%"
        align="center"
      >
        <template slot-scope="scope">
          <div style="display: flex; margin-left: 15px">
            <el-button
              :plain="true"
              size="mini"
              style="font-size: 12px; color: black; background-color: #fff"
              @click="handle(scope.row, scope.$index)"
              >通知缴费
            </el-button>
            <el-button
              :plain="true"
              type="primary"
              size="mini"
              style="background-color: #fff; color: #20a0ff; font-size: 12px"
              @click="handlea(scope.row, scope.$index)"
              >缴费详情
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next, jumper"
        :current-page.sync="iPagination.current"
        :page-size="iPagination.pageSize"
        :page-sizes="iPagination.pageSizeOptions"
        :total="iPagination.total"
        background
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <park-dialog ref="parkDialog"></park-dialog>
  </div>
</template>

<script>
import moment from "moment";
import dateFunc from "@/utils/dateFunc";
import { export2Excel } from "@/utils/util";
import parkDialog from "./parkDialog";

export default {
  name: "parking",
  components: {
    parkDialog,
  },
  data() {
    return {
      type: "",
      name: "",
      form: {
        parkname: "",
        parkpay: "",
        parktype: "",
        parkstatus: "",
      },
      statusList: [
        {
          text: "已缴费",
          value: "1",
        },
        {
          text: "未缴费",
          value: "2",
        },
      ],
      multipleSelection: [],
      columns: [
        { title: "序号", key: "index" },
        { title: "车位名称", key: "unitname" },
        { title: "幢号", key: "buildnum" },
        { title: "楼层号", key: "storeynum" },
        { title: "房号", key: "homenum" },
        { title: "住客姓名", key: "homename" },
        { title: "状态", key: "homestatus" },
      ],
      tableData: [],
      iPagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: [5, 10, 20, 50, 100],
        total: 0,
        page: 0,
        pageSize: 10,
      },
      loading: false,
      dialogFormVisible: false,
      dialogTableVisible: false,
      title: "车位通知管理",
    };
  },
  created() {
    this.$axiosToken({
      url: "/users/getUserByToken",
      method: "get",
      data: {},
      success: (result) => {
        this.type = result.type;
        this.name = result.username;
      },
    });
  },
  mounted() {
    this.getSmartData();
  },
  methods: {
    handleCurrentChange(val) {
      this.iPagination.current = val;
      this.getSmartData();
    },
    handleSizeChange(val) {
      this.iPagination.current = 1;
      this.iPagination.pageSize = val;
      this.getSmartData();
    },

    // 分配车位

    // 获取列表
    // http://community.byesame.com/parking/getParkOrder?parkname=&orderstatus=&orderpay=&pageNum=10&currPage=0
    getSmartData() {
      this.loading = true;
      this.$axiosToken({
        url: "/parking/getParkOrder",
        method: "get",
        data: {
          parkname: this.form.parkname,
          orderpay: this.form.orderpay,
          orderstatus: this.form.orderstatus,
          currPage: this.iPagination.current - 1,
          pageNum: this.iPagination.pageSize,
        },
        success: (result) => {
          this.tableData = result.data;
          this.iPagination.total = result.total;
          this.multipleSelection = result.data;
          setTimeout(() => {
            this.loading = false;
          }, 200);
        },
      });
    },

    // 修改,模态框
    handle(row, index) {
      this.$refs.parkDialog.title = "车位通知管理";
      this.$refs.parkDialog.dialogFormVisible = true;
      this.$refs.parkDialog.init(row);
    },
    // 修改,模态框
    handlea(row, index) {
      this.$refs.parkDialog.title = "车位通知详情";
      this.$refs.parkDialog.dialogFormVisible = true;
      this.$refs.parkDialog.init(row);
    },
    // http://community.byesame.com/parking/payParkOrder?u_id=523&orderstatus=1&token=
    handleStatusChange(data, row) {
      this.loading = true;
      this.$axiosToken({
        url: "/parking/payParkOrder",
        method: "post",
        data: {
          u_id: row.id,
          orderstatus: row.orderstatus,
        },
        success: (result) => {
          this.tableData = result.data;
          this.iPagination.total = result.total;
          setTimeout(() => {
            this.loading = false;
          }, 200);
          this.getSmartData();
        },
      });
    },

    // 状态转为文字
    typeFormatter(row, column) {
      const unitstatus = row.unitstatus;
      if (unitstatus == 1) {
        return "已建成";
      } else {
        return "未建成";
      }
    },
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      } else {
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      }
    },
    // 重置
    reset() {
      this.form = {
        parkname: "",
        parkpay: "",
        parktype: "",
        parkstatus: "",
      };
      this.getSmartData();
    },
    indexMethod(index) {
      return index + 1;
    },
    outExcel() {
      if (this.multipleSelection.length != 0) {
        export2Excel(this.columns, this.multipleSelection);
      } else {
        this.$alert("请选择要导出的房号信息", "提示", {
          confirmButtonText: "确定",
        });
      }
    },
  },
};
</script>
<style scoped>
.postButton {
  /* margin-left: 15px; */
  width: 10%;
  font-size: 14px;
  color: #fff;
}

.block {
  float: right;
  margin-top: 8px;
}
/* switch按钮样式 */
::v-deep.switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}
/*打开时文字位置设置*/
::v-deep.switch .el-switch__label--right {
  z-index: 1;
}
/* 调整打开时文字的显示位子 */
::v-deep.switch .el-switch__label--right span {
  margin-right: 9px;
  font-size: 14px;
}
/*关闭时文字位置设置*/
::v-deep.switch .el-switch__label--left {
  z-index: 1;
}
/* 调整关闭时文字的显示位子 */
::v-deep.switch .el-switch__label--left span {
  margin-left: 20px;
  font-size: 14px;
}
/*显示文字*/
::v-deep.switch .el-switch__label.is-active {
  display: block;
  font-size: 14px;
}
/* 调整按钮的宽度 */
::v-deep.switch.el-switch .el-switch__core,
::v-deep.el-switch .el-switch__label {
  width: 70px !important;
  margin: 0;
}
</style>
